import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:stacked/stacked.dart';
import 'package:vista/app/di/injection.dart';
import 'package:vista/features/skills/viewmodels/skills_class_viewmodel.dart';
import 'package:vista/shared/services/tutorial_video_service.dart';
import 'package:vista/shared/utils/widget_extension.dart';

/// 技能课程页面
class SkillsClassView extends StatelessWidget {
  const SkillsClassView({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<SkillsClassViewModel>.reactive(
      viewModelBuilder:
          () =>
              SkillsClassViewModel(getIt.get<TutorialVideoService>())
                ..initialize(),
      builder: (context, model, child) {
        return Scaffold(
          body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/my-background.png'),
                fit: BoxFit.cover,
              ),
            ),
            child: SafeArea(
              child: [
                // 标题栏
                _buildHeader(context),
                // 装饰图片
                _buildDecorationImage(),
                SizedBox(height: 20.h),
                // 横向滚动视频列表
                Expanded(
                  child:
                      model.isBusy
                          ? const Center(child: CircularProgressIndicator())
                          : _buildVideoList(context, model),
                ),
                SizedBox(height: 20.h),
              ].verticalShot(crossAxisAlignment: CrossAxisAlignment.stretch),
            ),
          ),
        );
      },
    );
  }

  /// 构建标题栏
  Widget _buildHeader(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 12.h),
      child: Row(
        children: [
          // 返回按钮
          GestureDetector(
            onTap: () => Navigator.of(context).pop(),
            child: Image.asset(
              'assets/images/back.png',
              width: 24.w,
              height: 24.w,
            ),
          ),
          // 标题
          Expanded(
            child: Text(
              'Skills Class',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 20.sp,
                fontFamily:
                    GoogleFonts.alegreyaSans(
                      fontWeight: FontWeight.w700,
                    ).fontFamily,
                color: Colors.black87,
              ),
            ),
          ),
          // 占位，保持标题居中
          SizedBox(width: 24.w),
        ],
      ),
    );
  }

  /// 构建装饰图片
  Widget _buildDecorationImage() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 14.w),
      child: AspectRatio(
        aspectRatio: 347 / 94,
        child: Image.asset(
          'assets/images/skill-decoration.png',
          fit: BoxFit.fill,
        ),
      ),
    );
  }

  /// 构建视频列表
  Widget _buildVideoList(BuildContext context, SkillsClassViewModel model) {
    if (model.videos.isEmpty) {
      return const Center(child: Text('No videos available'));
    }

    return ListView.builder(
      scrollDirection: Axis.horizontal,
      padding: EdgeInsets.symmetric(horizontal: 14.w),
      itemCount: model.videos.length,
      itemBuilder: (context, index) {
        return Padding(
          padding: EdgeInsets.only(
            right: index < model.videos.length - 1 ? 12.w : 0,
          ),
          child: _buildVideoItem(context, model, model.videos[index]),
        );
      },
    );
  }

  /// 构建单个视频项
  Widget _buildVideoItem(
    BuildContext context,
    SkillsClassViewModel model,
    video,
  ) {
    return GestureDetector(
      onTap: () async {
        await Navigator.of(
          context,
        ).pushNamed('/video-player', arguments: {'videoId': video.id});
        // 返回后刷新列表
        if (context.mounted) {
          await model.refresh();
        }
      },
      child: AspectRatio(
        aspectRatio: 273 / 534,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20.r),
            image: DecorationImage(
              image: AssetImage(video.coverImage),
              fit: BoxFit.cover,
            ),
          ),
          child: Stack(
            children: [
              // 播放图标（居中偏上）
              Positioned(
                top: 120.h,
                left: 0,
                right: 0,
                child: Container(
                  height: 200.h,
                  alignment: Alignment.center,
                  child: Image.asset(
                    'assets/images/play.png',
                    width: 32.w,
                    height: 32.w,
                  ),
                ),
              ),
              // 底部信息
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.transparent,
                        Colors.black.withOpacity(0.7),
                      ],
                    ),
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(20.r),
                      bottomRight: Radius.circular(20.r),
                    ),
                  ),
                  padding: EdgeInsets.all(16.w),
                  child: [
                    // 视频标题
                    Text(
                      video.title,
                      style: TextStyle(
                        fontSize: 24.sp,
                        fontFamily:
                            GoogleFonts.alegreyaSans(
                              fontWeight: FontWeight.w700,
                            ).fontFamily,
                        color: Colors.white,
                      ),
                      textAlign: TextAlign.center,
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                    SizedBox(height: 80.h),
                    // 访问次数徽章
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          padding: EdgeInsets.symmetric(
                            horizontal: 8.w,
                            vertical: 4.h,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.white.withOpacity(0.3),
                            borderRadius: BorderRadius.circular(8.r),
                            border: Border.all(
                              color: Colors.white.withOpacity(0.5),
                              width: 1.w,
                            ),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Image.asset(
                                'assets/images/eye.png',
                                width: 14.w,
                                height: 14.w,
                                color: Colors.white,
                              ),
                              SizedBox(width: 4.w),
                              Text(
                                '${video.viewCount}',
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ].verticalShot(crossAxisAlignment: CrossAxisAlignment.center),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
